<template>
		<!-- 顶部导航栏 -->
		<view class="u-navbar u-navbar-fixed" :style=[navbarStyle]>
			<view class="u-status-bar" :style=[statusStyle]></view>
			<view class="u-navbar-inner" :style=[navbarInnerStyle]>
				<view class="u-back-wrap">
					<view class="u-icon-wrap u-back-text u-line-1" :style="[navTitleStyle]">{{name}}</view>
				</view>
				<view hover-class="hover-search" class="search-box u-flex u-row-center u-col-center u-m-r-30">
					<view class="u-iconfont uicon-search" style="color: #fff"></view>
				</view>
			</view>
		</view>
</template>

<script>
  let systemInfo = uni.getSystemInfoSync();
  console.log(systemInfo)
  export default {
    props: {
      list: {
        type: Array,
        default() {
          return []
        }
      },
      name: {
        type: String || Number,
        default: ""
      }
    },
    created() {
      console.log(this.list)
    },
    computed: {
      // 设置字体的颜色
      navTitleStyle() {
        let style = {
          color: '#fff',
          fontSize: '38rpx'
        }
        return style
      },
      // 内容区域的高度
      navbarInnerStyle() {
        let style = {}
        let height = 0;
                
        // #ifdef APP-PLUS || H5
        height = 44
        //#endif
        
        // #ifdef MP
        height = systemInfo.platform === "ios"?44:48
        //#endif
        
        style.height = height + "px"
                
        return style
      },
      // 设置手机端状态栏的高度
      statusStyle() {
        let style = {}
        // 必须加上px值
        style.height = systemInfo?.statusBarHeight + "px"
        return style
      },
      // 设置背景图片的
      navbarStyle() {
        let style = {}
        style.background = 'url(' + this.list[0]?.image + ") no-repeat top / 100% auto"
        return style;
      }
    }
  }
</script>
<style lang="scss" scoped>
@mixin vue-flex($direction: row) {
	/* #ifndef APP-NVUE */
	display: flex;
	flex-direction: $direction;
	/* #endif */
}
.search-box {
  width: 66rpx;
  height: 66rpx;
  background: rgba(#000, 0.18);
  border-radius: 100%;
}
.hover-search {
  background: rgba(#fff, 0.18);
}

.u-navbar {
	width: 100%;
}

.u-navbar-fixed {
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	z-index: 991;
}

.u-status-bar {
	width: 100%;
}

.u-navbar-inner {
	@include vue-flex;
	justify-content: space-between;
	position: relative;
	align-items: center;
}

.u-back-wrap {
	@include vue-flex;
	align-items: center;
	flex: 1;
	flex-grow: 0;
	padding: 14rpx 14rpx 14rpx 24rpx;
}
</style>
